<template>
  <div>
    <header class="category-header">
      <div class="category-left">
        商品分类
      </div>
      <div class="category-right">
        <div class="category-right-search">
          <div class="right-search-icon">
            <span class="icon iconfont">&#xe6b9;</span>
          </div>
          <div class="left-search-show">
            美的
          </div>
        </div>
      </div>
    </header>
    <section class="category-main">
      <div class="category-main-left">
        <scroll-y :data="categoryList">
          <van-sidebar v-model="activeKey">
            <van-sidebar-item
              :title="item.categoryName"
              v-for="(item, index) in categoryList"
              :key="index"
            />
          </van-sidebar>
        </scroll-y>
      </div>
      <div class="category-main-right">
        <category-list />
      </div>
    </section>
    <footer class="category-footer">
      <footerBottom :activeIndex="1" />
    </footer>
  </div>
</template>
<script>
import scrollY from '../../base/scrollY'
import footerBottom from '../../base/footerBottom'
import categoryList from './categoryList'
export default {
  components: {
    scrollY,
    categoryList,
    footerBottom,
  },
  data() {
    return {
      activeKey: 0,
      categoryList: [
        {
          id: 1,
          categoryName: '热门推荐',
        },
        {
          id: 2,
          categoryName: '手机数码',
        },
        {
          id: 3,
          categoryName: '大家电',
        },
        {
          id: 4,
          categoryName: '电脑办公',
        },
        {
          id: 5,
          categoryName: '厨卫大电',
        },
        {
          id: 6,
          categoryName: '生活家电',
        },
        {
          id: 7,
          categoryName: '食品酒水',
        },
        {
          id: 8,
          categoryName: '个人护理',
        },
        {
          id: 9,
          categoryName: '美妆护肤',
        },
        {
          id: 10,
          categoryName: '奶粉尿裤',
        },
        {
          id: 11,
          categoryName: '珠宝首饰',
        },
        {
          id: 12,
          categoryName: '品质男鞋',
        },
        {
          id: 13,
          categoryName: '精品女鞋',
        },
        {
          id: 14,
          categoryName: '居家生活',
        },
      ],
    }
  },
}
</script>
<style lang="less" scoped>
@import '../../../style/mixin';
.category-header {
  display: flex;
  background-color: #fff;
  font-size: 0.768rem;
  color: #333;
  .category-left {
    width: 3.84rem;
    height: 2.304rem;
    line-height: 2.304rem;
    text-align: center;
  }
  .category-right {
    flex: 1;
    height: 2.304rem;
    .category-right-search {
      background-color: @backcolor;
      height: 1.365333rem;
      border-radius: 1.28rem;
      width: 10.666667rem;
      margin: 0 auto;
      display: flex;
      overflow: hidden;
      .positionCenter();
      .right-search-icon {
        width: 1.365333rem;
        height: 1.365333rem;
        text-align: center;
        line-height: 1.365333rem;
        color: #999;
      }
      .left-search-show {
        flex: 1;
        height: 1.365333rem;
        font-size: 0.682667rem;
        color: #999;
        line-height: 1.365333rem;
      }
    }
  }
}
// section块开始
.category-main {
  .autoHeight(2.304rem, #fff);
  display: flex;
  .category-main-left {
    width: 3.84rem;
    height: 100%;
    overflow: hidden;
  }
  .category-main-right {
    flex: 1;
    height: 90%;
    overflow: auto;
  }
}
// 修改vant样式
.van-sidebar {
  width: 100%;
  padding-bottom: 2.133333rem;
}
// section块结束
.category-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}
/deep/.van-sidebar-item__text {
  font-size: 0.597333rem !important;
}
</style>
